<!--
 * @Author: ChunLai
 * @Date: 2023-10-17 17:40:36
 * @LastEditTime: 2023-10-17 18:30:56
 * @Description: 惠泽首页搜索 /test_page
 * @FilePath: \0.newInsure\src\views\test\components\InputSearch.vue
-->
<template>
  <div>
    <div class="input_demo_box">
      <div class="input_demo">
        <van-icon name="search" />
        <span class="search_span">输⼊想查找的产品</span>
      </div>
    </div>
    <!-- 搜索页 -->
    <div class="search_box">
      <div class="search_wrap">
        <span class="icon_posi"><van-icon name="search" /></span>
        <input
          type="text"
          name="search"
          id="searchInput"
          class="search_input f28"
          placeholder="请输入想要查找的产品"
        />
      </div>
      <div class="search_text">搜索</div>
    </div>
    <div class="history_list" v-if="listLen > 0">
      <div class="list_item line_bdm">
        <span class="item_txt">历史搜索</span>
        <van-icon name="delete-o" @click="delHistory" />
      </div>
      <div class="his_item_ul">
        <div
          class="his_item line_bdm"
          v-for="(item, index) in list"
          :key="`history${index}`"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="empty_pic" v-else>
      <img
        src="https://res.qixin18.com/triph5/images/tongda/empty.png"
        width="100%"
      />
      <p class="empty_txt">请输入搜索条件</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InputSearch',
  data() {
    return {
      list: [
        {
          id: '1',
          name: '逸家',
        },
        {
          id: '2',
          name: '好孕宝母婴住院',
        },
      ],
    };
  },
  components: {},
  computed: {
    listLen() {
      let res = 0;
      if (this.list.length > 0) {
        res = this.list.length;
      }
      return res;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    delHistory() {
      this.list = [];
    },
  },
};
</script>

<style lang="less" scoped>
.input_demo_box {
  width: 100%;
  padding: 4px 14px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #999;
  background-color: #fff;
  .input_demo {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    line-height: 1;
    color: #333;
    border-radius: 36px;
    padding-left: 16px;
    background-color: #f2f2f2;
    .search_span {
      margin-left: 6px;
    }
  }
}
.empty_pic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  img {
    width: 90px;
  }
  .empty_txt {
    font-size: 12px;
    line-height: 2.2;
    margin-top: 10px;
  }
}
.search_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background: #f1f1f1;
  margin-top: 30px;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #dfdfdf;
    transform: scaleY(0.5);
  }
  .search_wrap {
    display: flex;
    align-items: center;
    width: 90%;
    height: 28px;
    background-color: #fff;
    border-radius: 5px;
    position: relative;
    .icon_posi {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 10px;
      margin: auto;
      width: 14px;
      height: 14px;
    }
    .search_input {
      width: 100%;
      background: 0 0;
      height: 28px;
      vertical-align: top;
      padding-left: 30px;
      border: 0;
      outline: 0;
      color: #666;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
  }
  .search_text {
    width: 10%;
    font-size: 15px;
    text-align: right;
  }
}

.list_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  .item_txt {
    color: #333;
  }
}
.his_item_ul {
  padding: 0 15px;
  .his_item {
    padding: 15px 0;
    color: #666;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

.line_bdm {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid #dfdfdf;
    transform: scaleY(0.5);
  }
}

input::-webkit-input-placeholder {
  color: #b2b2b2;
}
input:-ms-input-placeholder {
  color: #b2b2b2;
}
input:-moz-placeholder {
  color: #b2b2b2;
}
input::-moz-placeholder {
  color: #b2b2b2;
}
</style>
